<template>
  <a-card
    ref="card"
    :style="`min-height: ${minHeight}`"
    :loading="loading"
    :headStyle="{ color: '#fff' }"
    title="各部门考核占比情况"
    :bordered="false"
  >
    <Pie :sourceData="sourceData" :height="height" />
    <div class="actions">
      <a-button-group>
        <a-button type="primary" @click="handleChange(-1)">
          <a-icon type="left" />上一季度
        </a-button>
        <a-button type="primary" @click="handleChange(1)" style="margin-left:30px;">
          下一季度<a-icon type="right" />
        </a-button>
      </a-button-group>
    </div>
  </a-card>
</template>

<script>
import moment from 'moment';
import { mapState } from 'vuex';
import Pie from '@/components/chart/inspection/Pie';
import { chartService } from '@/services';

export default {
  name: 'Ratio',

  components: { Pie },

  data() {
    return {
      params: {
        inspectionCycle: '季',
        inspectionType: '纪检考核',
        year: 2020,
        inspectionCycleNumber: 3,
      },
      sourceData: [],
      loading: true,
    };
  },

  computed: {
    ...mapState('setting', ['pageMinHeight']),
    minHeight() {
      return this.pageMinHeight ? this.pageMinHeight + 'px' : '100vh';
    },
  },

  created() {
    // 计算当前年份和季度 
    const quarter = moment().quarter();
    const year = moment().year();
    if (quarter === 1) {
      this.params.year = year - 1
      this.params.inspectionCycleNumber = 4
    } else {
      this.params.year = year
      this.params.inspectionCycleNumber = quarter - 1
    }

    this.getData();
  },

  mounted() {
    this.$nextTick(() => {
      const height = this.$refs.card.$el.offsetHeight;
      console.log('------------------', height);
      this.height = height - 150;
    });
  },

  methods: {
    getData() {
      chartService.getRatioChartData(this.params).then(res => {
        if (res.code === '200') {
          this.sourceData = res.data.deptList.map(item => {
            return {
              deptName: item.deptName,
              deptCount: item.eventCount,
            };
          });
          this.loading = false;
        }
      });
    },

    // 切换数据
    handleChange(type) {
      if (type === 1) {
        if (this.params.inspectionCycleNumber === 4) {
          this.params.year++;
          this.params.inspectionCycleNumber = 1;
        } else {
          this.params.inspectionCycleNumber++;
        }
      } else {
        if (this.params.inspectionCycleNumber === 1) {
          this.params.year--;
          this.params.inspectionCycleNumber = 4;
        } else {
          this.params.inspectionCycleNumber--;
        }
      }

      // this.getData();
    },
  },
};
</script>

<style lang="less" scoped>
@import './index.less';
</style>
